<template>
	<!-- 顶部 侧边 内容 -->
	<div style="flex: 1" class="column divheight">
		<adminhead />
		<div style="flex: 1" class="row">
			<!--左侧  -->
			<left :active="'5'"></left>
			<!-- 内容 -->
			<div style="flex: 1" class="column">
				<el-breadcrumb class="page-header" separator="/">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>网站设置</el-breadcrumb-item>
				</el-breadcrumb>
				<el-card style="flex: 1" class="Navigationcolumn">
					<el-form :model="from" :rules="rules" ref="from" class="demo-form-inline" label-width="100px">
						<el-form-item prop="logo" label="网站LOGO:">
							<div class="imgbox" @click=";(photo = true), key++">
								<!-- 图片框架 -->
								<el-image class="img" :src="'https://webgallery.oss-cn-beijing.aliyuncs.com/' + from?.logo" fit="contain">
									<template #placeholder>
										<div class="image-slot">
											<el-icon>
												<Plus />
											</el-icon>
										</div>
									</template>
									<template #error>
										<div class="image-slot">
											<el-icon>
												<Plus />
											</el-icon>
										</div>
									</template>
								</el-image>
							</div>
						</el-form-item>
						<el-form-item label="网站名称:" prop="title">
							<el-input style="width: 400px" v-model="from.title" placeholder="请输入网站名称"></el-input>
						</el-form-item>
						<el-form-item label="网站描述:" prop="description">
							<el-input v-model="from.description" style="width: 450px" resize="none" maxlength="60" placeholder="请输入代币描述" show-word-limit type="textarea" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" :loading="loading" @click="setdata()">提交 </el-button>
						</el-form-item>
					</el-form>
				</el-card>
				<photoalbum v-if="photo" @send-img="image" :key="key"></photoalbum>
			</div>
		</div>
	</div>
</template>

<script>
	import adminhead from '@/components/adminhead.vue'
	import adminleft from '@/components/adminleft.vue'
	import divright from '@/components/admin/divright.vue'
	import photoalbum from '@/components/photoalbum.vue'
	import { dataRequest as api } from '@/api/api'
	// 下面是组件列表

	export default {
		components: {
			adminhead,
			left: adminleft,
			photoalbum,
		},
		data() {
			return {
				photo: false,
				key: 0,
				domain: window.location.hostname.toLowerCase().replace(/^www\./, ''),
				loading: false,
				from: {
					title: '',
					description: '',
					logo: '',
				},
				rules: {
					logo: [{ required: true, message: '请输入网站logo', trigger: 'blur' }],
					title: [{ required: true, message: '请输入网站标题', trigger: 'blur' }],
					description: [{ required: true, message: '请输入网站描述', trigger: 'blur' }],
				},
			}
		},
		methods: {
			image(img) {
				this.from.logo = img
				this.photo = false
			},
			async getdata() {
				let array = await api('Query', 'websettings', { domain: this.domain })

				if (array.code == 200) {
					this.from.logo = array.data.logo
					this.from.title = array.data.title
					this.from.description = array.data.description
				}
			},
			async setdata() {
				this.$refs['from'].validate(async (valid) => {
					if (valid) {
						this.loading = true

						let array = await api('Create', 'websettings', { title: this.from.title, description: this.from.description, logo: this.from.logo })
						if (array.code == 200) {
							this.$message.success(`修改成功`)
						} else {
							this.$message.error(`修改失败`)
						}
						this.loading = false
					}
				})
			},
		},
		mounted() {
			this.getdata()
		},
	}
</script>

<style scoped>
	.divheight {
		height: 100%;
		min-width: 1895px !important;
	}
	.Navigationcolumn {
		gap: 20px;
		margin: 15px;
	}
	.Navigationcolumn .image-slot {
		border: 1px solid #c8c9cc;
		border-radius: 4px;
		width: 100px;
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #c8c9cc;
		font-size: 30px;
	}
	.Navigationcolumn .img {
		border-radius: 4px;
		height: 100px;
		max-width: 430px;
	}
	.page-header {
		padding: 10px;
		background-color: #fff;
	}
</style>
